{% extends "personal_center/base.html" %}

{% block page_link %}
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/index.css">
    <link rel="stylesheet" type="text/css" href="../../static/personal_center/css/common.css">
    <script type="text/javascript" src="../../static/personal_center/js/index.js"></script>
    <link type="text/css" rel="stylesheet" href="../../static/personnel/TimeSelector/skin/jedate.css">
    <script type="text/javascript" src="../../static/personnel/TimeSelector/src/jedate.js"></script>
{% endblock %}


{% block style %}
    <style>
        .add_class {
            background: #1E90FF;
        }
    </style>
{% endblock %}


{% block right_content %}
    <div id="new_issues" style="width: 100%;height: 100%;overflow: auto;background-color: white;">
        <div style="width: 100%;height: 40px;font-size: 0;text-align: right;padding-right: 15px;">
            <div style="display: inline-block;vertical-align: top;height: 40px;line-height: 40px;font-size: 14px;margin-right: 10px;">
                <input type="text" style="width: 250px;height: 30px;border: #0d8ddb solid 1px;display: inline-block;padding-left: 0.5%;" id="test08" autocomplete='off' placeholder="选择填报时间段">
            </div>
            <input type="text" id="search_value" name="search_val" style="width: 300px;display: inline-block;border: #0d8ddb solid 1px;vertical-align: top;font-size: 14px;padding-left: 2px;margin-top: 5px;height: 30px;outline: none;" placeholder="请输入搜索关键词">
            <button class="search-action" style="width: 100px;border-bottom-right-radius: 3px;border-top-right-radius: 3px;display: inline-block;font-size: 14px;border: #0d8ddb solid 1px;border-left: none;background: #0d8ddb;color: white;margin-top: 5px;height: 30px;margin-right: 15px;outline: none;cursor: pointer;margin-left: -1px;">搜索</button>
        </div>

        <div id="my_application" style="width: 100%;height: 95.3%;overflow: auto;background-color: white;">
            <div class="right-box" style="width: 100%;height: 100%;margin-top: 0;">
                <div style="height: 100%;width: 100%;overflow: auto;border-bottom: #cccccc solid 1px;background-color: white;">
                    <section class="grid-main" style="height: calc(100vh - 95px)">
                        <table id="main_table"></table>
                    </section>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block script %}
    <script type="text/javascript" src="../../static/administrative/js/layer.js"></script>
    <script type="text/javascript" src="../../static/personnel/TimeSelector/test/demo.js"></script>
    <script src="../../static/administrative/layDate-v5.0.9/laydate/laydate.js"></script> <!-- 改成你的路径 -->
    <script>
        window.onload = function () {
            document.getElementById("loading").style.display = "none";
            document.getElementById("personage").className = "add_class";
            document.getElementById("middle_level").className = "add-nav-active";
            document.getElementById("SystemReport").style.display='block';
            document.getElementById("ReportIco").className = "iconfont icon-jiantou-xia";
        };

        const gridManagerName = "test",
        TYPE_MAP = {1: "HTML/CSS", 2: "nodeJS", 3: "javaScript", 4: "前端鸡汤", 5: "PM Coffee", 6: "前端框架", 7: "前端相关"},
        arg = {
            gridManagerName: "test",
            width: "100%",
            height: "100%",
            autoOrderConfig: {fixed: "left"},
            checkboxConfig: {key: "id", fixed: "left"},
            supportAjaxPage: !0,
            sortMode: "single",
            supportMenu: !0,
            menuHandler: e => (e.unshift({
                content: "自定义菜单", line: !0, onClick: e => {
                    alert(e)
                }
            }), e),
            useCellFocus: !0,
            useHideRow: !0,
            supportMoveRow: !0,
            moveRowConfig: {
                key: "priority", useSingleMode: !0, fixed: "left", handler: (e, t) => {
                    console.log(e, t)
                }
            },
            disableCache: !1,
            ajaxData: function (e, t) {
                var local_host = window.location.host;          // 获取当前IP
                return "/forum/middle_level_echart.html"
            },
            exportConfig: {
                fileName: e => {
                    const t = new Date;
                    let a = `${t.getFullYear()}-${t.getMonth() + 1}-${t.getDate()}`;
                    for (let t in e) a = `${a}-${t}=${e[t]}`;
                    return a
                }, suffix: "xls"
            },
            ajaxType: "POST",
            checkedBefore: function (e, t, a) {
                return console.log("checkedBefore==", e, t, a), a && 90 === a.id && alert("该节点在checkedBefore中配置为不可选"), a && 90 !== a.id
            },
            responseHandler: e => (e.data.forEach((e => {
                e.priority = e.id
            })), e),
            rowRenderHandler: (e, t) => e,
            emptyTemplate: e => `<div style="text-align: center;">${e.query.title ? "搜索为空" : "暂无数据"}</div>`,
            columnData: [
                {
                    key: "outsiders",
                    text: "外出人",
                    align: "center",
                }, {
                    key: "duties",
                    text: "科室及职务",
                    align: "center",
                }, {
                    key: "outgoing_time",
                    text: "外出时间",
                    align: "center",
                }, {
                    key: "title",
                    text: "外出事由",
                    align: "center",
                }, {
                    key: "destination",
                    text: "去前往地点",
                    align: "center",
                }, {
                    key: "apply_user",
                    text: "请假人",
                    align: "center",
                }, {
                    key: "department_charge",
                    text: "分管部门批示",
                    align: "center",
                }, {
                    key: "leader",
                    text: "领导批示",
                    align: "center",
                }, {
                    key: "apply_time",
                    text: "请假填报时间",
                    align: "center",
                }]
        }, demo1 = {
            initSearch: function () {
            }, initFN: () => {
                document.querySelector(".search-action").addEventListener("click", (function () {
                    var data_value = document.getElementById("search_value").value;
                    var test08 = document.getElementById("test08").value;
                    var e = {
                        search_data: data_value,
                        test08: test08,
                    };
                    table.GM("setQuery", e, (function () {
                        console.log("setQuery执行成功")
                    }))
                 }))
            }, initGM: function () {
                new window.GridManager(table, arg, (e => {
                    console.log("渲染完成后的回调函数:", e), console.log(arg.columnData)
                }))
            }, editRowData: function (e) {
                window.GridManager.updateRowData("test", "id", {
                    id: window.parseInt(e.getAttribute("data-id")),
                    lastDate: (new Date).getTime()
                })
            }
        }, table = document.querySelector("#main_table");
        demo1.initSearch(table), demo1.initGM(table), demo1.initFN();

    </script>
{% endblock %}
